<template>
    <div class="app-container app-container-next app-container-detail">
        <el-card class="box-card" shadow="false">
            <div slot="header" class="clearfix">
                <router-link :to="{name: 'member-list'}">
                    <el-button plain icon="el-icon-back" size="small" :round="true">
                        返回
                    </el-button>
                </router-link>
            </div>
            <el-row>
                <el-col :span="24">
                    <el-form ref="memberForm" :model="member" label-width="120px" label-position="top">
                        <h4>用户信息</h4>
                      <div class="flex-c">
                            <el-form-item label="邮箱：">
                                    {{member.email}}
                                </el-form-item>
                            <el-form-item label="加入时间：">
                                    {{member.createDate|utcFormat('YYYY-MM-DD HH:mm:ss', this.timeZone)}}
                            </el-form-item>
                             <el-form-item label="首次下单时间：">
                                    {{member.firstOrderTime|utcFormat('YYYY-MM-DD HH:mm:ss', this.timeZone)}}
                            </el-form-item>
                             <el-form-item label="历史订单数：">
                                    {{member.orderCount}}
                            </el-form-item>
                            <el-form-item label="购买商品数：">
                                    {{member.consumeProductCount}}
                            </el-form-item>
                            <el-form-item label="累计消费：">
                                    <span v-if="member.consumeMoney">{{member.consumeMoney|currency('$')}}</span>
                            </el-form-item>
                              <el-form-item label="">
                            </el-form-item>
                            <el-form-item label="">
                            </el-form-item>
                            <el-form-item label="">
                            </el-form-item>
                             <el-form-item label="">
                              </el-form-item>
                        </div>
                        <h4>收货地址</h4>
                        <el-table :data="member.addressList" fit highlight-current-row >
                                <el-table-column align="center" label="收货人" prop="name">
                                    <template slot-scope="{row}">
                                         {{row.name}}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="默认地址" prop="defaultStatus">
                                    <template slot-scope="{row}">
                                        <span v-if="row.defaultAddress ">是</span>
                                        <span v-else>否</span>
                                    </template>
                                </el-table-column>
                                 <el-table-column align="center" label="邮编" prop="postCode">
                                    <template slot-scope="{row}">
                                        {{row.postCode}}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="手机号" prop="phone">
                                    <template slot-scope="{row}">
                                        {{row.phone}}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="地址" prop="detailAddress">
                                    <template slot-scope="{row}">
                                      {{row.city}} {{row.street}} {{row.apartment}}
                                    </template>
                                </el-table-column>
                        </el-table>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import {getMember} from '@/api/member';
import {mapGetters} from 'vuex';
export default {
    name: 'member-detail',
    data () {
        return {
            memberId: this.$route.params.id,
            member: {
                email: '',
                nickname: '',
                mobile: '',
                createDate: '',
                firstOrderTime: '',
                orderCount: '',
                consumeProductCount: '',
                consumeMoney: '',
                addressList: []
            }
        };
    },
    methods: {
        getMember () {
            getMember(this.memberId).then(res => {
                this.member = res;
            });
        }
    },
    computed: {
        ...mapGetters(['timeZone'])
    },
    created () {
        this.getMember();
    }
};
</script>

<style scoped lang="scss">
.amount{
    text-align: right;
    span,label{
        display: inline-block;
    }
    span{
        width: 100px;
        text-align: right;
    }
    label {
        width: 80px;
        text-align: left;
        color: #409EFF;
    }
}
</style>
